<template>
    <div class="wrap">
        <div class="content" ref="pdfContent">
            <div class="header">
                <div class="title">智隼系统运行质量分析报告</div>
                <div class="subTitle">2024年第二季度</div>
                <div class="line"></div>
            </div>
            <!-- 内容 -->
            <div class="info" :data="json=JSON.stringify(list)">
                <div v-for="(item, index) in list" :key="index">
                    <div class="infoTitle">
                        {{ item.label }}
                    </div>
                </div>
            </div>
        </div>
        <div class="button" @click="handClick">转pdf</div>
    </div>
</template>
<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import { demoList } from './data';
export default {
    name: 'Pdf',
    data() {
        return {
            list: [],
        }
    },
    methods: {
        handClick() {
            let ele = this.$refs.pdfContent;
            let name = '导出文件'
            html2canvas(ele, {
                useCORS: true,
                scale: 2,
            }).then((canvas) => {
                const contentWidth = canvas.width
                const contentHeight = canvas.height
                /* 导出不分页处理 */
                const pageData = canvas.toDataURL('image/jpeg', 1.0)
                // const pdfWidth = (contentWidth + 10) / 2 * 0.75
                // const pdfHeight = (contentHeight + 200) / 2 * 0.75 // 500为底部留白
                const pdfWidth = (contentWidth + 10) / 2 * 0.75
                const pdfHeight = (contentHeight) / 2 * 0.75
                const imgWidth = pdfWidth
                const imgHeight = (contentHeight / 2 * 0.75)
                const PDF = new jsPDF('', 'pt', [pdfWidth, pdfHeight,])
                PDF.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight)
                PDF.save(name + '.pdf')
            })
        }
    },
    mounted() {
        this.list = demoList;
    }

}
</script>
<style lang="less" scoped>
.wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;

    .content {
        width: 600px;
        min-height: 80vh;
        // height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid #cdcdcd;
        // background-color: pink;

        .header {
            .title {
                color: red;
                font-size: 36px; // 小初字体
                font-weight: 800;
                text-align: center;
                margin-top: 48px;
            }

            .subTitle {
                margin-top: 24px;
                text-align: center;
                font-size: 18px;
                letter-spacing: 2px;
            }

            .line {
                width: 80%;
                margin-left: 10%;
                height: 1px;
                background-color: red;
                margin-top: 12px;
            }
        }
    }

    .button {
        position: fixed;
        top: 20px;
        right: 20px;
    }
}
</style>